<template>
  <div class="mapview-main">
    <div class="mapview-main-border">
      <!-- 背景 -->
      <div class="mapview-bg">
        <!-- <b-2d-Map ref='alimap'
          id="amap"></b-2d-Map> -->
        <iframe
          ref='alimap'
          id="amap"
          src="/bmap"
          frameborder="0"
        ></iframe>
        <!-- <iframe
          ref='alimap'
          id="amap"
          src="/b2dMap"
          frameborder="0"
        ></iframe> -->
        <!-- <iframe
          ref='alimap'
          id="amap"
          src="/amap"
          frameborder="0"
        ></iframe> -->
      </div>
      <!-- 左對話框 -->
      <div class="box-left">
      </div>
    </div>
     <div class="mapview-maps">
      <!-- map1 -->
      <div class="map-card">
        <iframe
          ref='BMapPolygon'
          id="amap"
          src="/BMapPolygon"
          frameborder="0"
        ></iframe>
      </div>
      <!-- map2 -->
      <div class="map-card" style="left:33.5%">
        <iframe
           ref='home'
          id="home"
          src="/home"
          frameborder="0"
        ></iframe>
      </div>
      <!-- map3 -->
      <div class="map-card" style="left:66.8%">
        <iframe
          ref='alimap'
          id="amap"
          src="/amap"
          frameborder="0"
        ></iframe>
      </div>
    </div>
    <audio
      id='myAudio'
      src=""
    ></audio>
  </div>
</template>

<style lang="scss" scoped>
.MDshow {
  display: block;
}
#amap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.amap-marker-label {
  // position: relative;
  width: 10px;
  height: 10px;
  background: rgba(246, 4, 4, 0.657);
  border: 1px solid rgba(79, 117, 240, 0.5);
  border-radius: 180%;
  color: rgba(79, 117, 240, 0);
}
.amap-marker-label:hover {
  width: 300px;
  height: 20px;
  background: rgba(255, 255, 255);
  font-size: 20px;
  border-radius: 10px;
  padding: 5px;
  color: rgb(17, 17, 17);
  border: 2px solid rgb(79, 116, 240);
}
.mapview-main {
  position: fixed;
  width: 100%;
  height: 100%;
  padding: 5px;
  left: 0;
  top: 0;
  // background: url("../assets/bg.png") repeat;
  .mapview-main-border {
    background-size: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    .mapview-bg {
      background: #6eb4ed;
      position: absolute;
      width: 100%;
      height: 53%;
    }
  }
}
#mapview {
  height: 100%;
}
.mapview-maps{
  display: flex;
  .map-card {
    background: #6eb4ed;
    position: absolute;
    top:54%;
    width: 33%;
    height: 46%;
    iframe{
      width:100%;
      height: 100%;
    }
  }
}
</style>
<script>
import nantong from "@/geo/nantong";
import * as echarts from "echarts";
import "vue-bmap-gl/dist/style.css";
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent
} from "echarts/components";
import {
  MapChart,
  ScatterChart,
  PieChart,
  BarChart,
  LineChart
} from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import myHttp from "../router/httpStone";
echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
  PieChart,
  BarChart,
  LineChart,
  MapChart,
  ScatterChart,
  CanvasRenderer
]);
import Recorder from "recorder-core";
import "recorder-core/src/engine/wav";
import "recorder-core/src/engine/mp3-engine";
//由于大部分情况下ios-weixin的支持需要用到amr解码器，应当把amr引擎也加载进来
import "recorder-core/src/engine/beta-amr";
import "recorder-core/src/engine/beta-amr-engine";
// eslint-disable-next-line no-irregular-whitespace
import { useStore } from "vuex";

export default {
  name: "Home",
  components: {},
  data() {
    return {
      store: useStore(), //此处初始化store对象
      audioBtnType: "开始录音",
      leftCircleAnim: "",
      rightCircleAnim: "",
      startTime: "",
      endTime: "",
      flag: 0,
      alimap: null,
      shwTip: false,
      rec: Recorder({
        type: "wav",
        sampleRate: 16000,
        bitRate: 16,
        onProcess: function() {}
      }),
      tegData: {},
      serverIP: "/api/",
      tags: ["金融", "政府", "公共卫生", "教育", "通信", "工业"],
      selectedTags: "all",
      zcTotle: "9876",
      dwTotle: [],
      checked1: false,
      checked2: false,
      checked3: false,
      mychart: null,
      mychartLine1: {},
      mychartD1: {},
      mychartD2: {},
      mychartB1: {},
      mychartB2: {},
      mychartB3: {},
      mychartB4: {},
      mychartB5: {},
      mychartB6: {},
      allData: []
    };
  },
  mounted() {
    this.alimap = this.$refs.alimap;
    echarts.registerMap("world", nantong);
    myHttp.mypost("/map", {}).then(res => {
      this.allData = res.allData;
      this.store.dispatch("setMapCompanys", res.allData);
      this.initChart();
      this.dwTotle = this.allData.length + "";
    });
    this.rec.open(function() {});
    setTimeout(() => {
      this.setTimePost();
    }, 5000);
  },
  methods: {
    /**关闭弹窗 */
    cloceWindow() {
      this.shwTip = false;
    },
    /** 轮询请求数据 */
    setTimePost() {
      //判断地图是否能下监听
      let that = this;
      setTimeout(() => {
        myHttp.mypost("/getLine", {}).then(res => {
          that.setLineDatas(res, "line1");
          that.setTimePost();
        });
      }, 5000);
    },
    /**开始录音**/
    recStart() {
      this.audioBtnType = "开始录音";
      // const _that = this;
      //打开了录音后才能进行start、stop调用
      this.rec.start();
      this.startTime = new Date().getTime();
      this.flag = -1; // 第二次重洗开始动画，这个触发watch监听
      setTimeout(() => {
        // _that.$refs.rightcircle.setAttribute("class", " active-animation-right");
        // _that.$refs.leftcircle.setAttribute("class"," active-animation-left");
      }, 100);
      // _that.$refs.rightcircle.setAttribute("css","-webkit-animation-play-state", "running");
      // _that.$refs.leftcircle.setAttribute("css","-webkit-animation-play-state", "running");
    },
    /**结束录音**/
    recStop() {
      this.audioBtnType = "完成录音";
      // let Base64 = require("js-base64").Base64;
      this.rec.stop(
        (blob, duration) => {
          //  var voiceToTextRes = ""
          this.showRecordingBox = false;
          console.log(
            blob,
            window.URL.createObjectURL(blob),
            "时长:" + duration + "ms"
          );
          //已经拿到blob文件对象想干嘛就干嘛：立即播放、上传
          /*** 【立即播放例子】 ***/
          var reader = new FileReader();
          reader.onloadend = () => {
            var voiceRes = reader.result;
            var VoiceData = voiceRes.substring(voiceRes.indexOf(",") + 1);
            myHttp
              .myVideoPost({ VoiceData })
              .then(res => {
                this.tegData = res;
                this.allData = this.tegData.gs;
                let resData = {
                  type: res.type,
                  text:
                    res.type == "公司详情"
                      ? (res.text = res.gs[0]["name"] || res.gs)
                      : res["text"]
                };
                this.getAdeio(resData);
                this.onChange(res.mapData);
                this.dewDilge(res.mapData["d1Data"]);
              })
              .catch(err => {
                console.log(err);
              });
          };
          reader.readAsDataURL(blob);
        },
        function(msg) {
          console.log("录音失败:" + msg);
          // this.rec.close();//可以通过stop方法的第3个参数来自动调用close
          // this.rec=null;
        }
      );
    },
    onChange(data) {
      console.log("onChange-commit-MY_EVENT_CHANEG_TRADE", data);
      this.store.dispatch("setMapCompanys", data);
      this.store.commit("setMapCompanys", data);
    },
    initChart() {
      const line1 = this.$refs.lineMap1;
      const b1 = this.$refs.b1;
      const b2 = this.$refs.b2;
      const b3 = this.$refs.b3;
      const b4 = this.$refs.b4;
      const b5 = this.$refs.b5;
      const b6 = this.$refs.b6;
      const data = this.getTypes(this.allData);
      const b1Data = data.b1Data;
      const b2Datas = data.b2Data;
      const b3Datas = data.b3Data;
      const b6Datas = data.b6Data;

      var COLOR_ALL = [
        "#99c6edb5",
        "#55b07194",
        "#ff5722b8",
        "#ffeb3b91",
        "#69d9e5b0",
        "#e13dbdb0"
      ];

      for (var i = 0; i < this.allData.length; i++) {
        this.allData[i].value = this.allData[i].value.split(",");
        switch (this.allData[i].type) {
          case "教育":
            this.allData[i].itemStyle = {
              color: COLOR_ALL[0]
            };
            break;
          case "工业":
            this.allData[i].itemStyle = {
              color: COLOR_ALL[1]
            };
            break;
          case "政府":
            this.allData[i].itemStyle = {
              color: COLOR_ALL[2]
            };
            break;
          case "金融":
            this.allData[i].itemStyle = {
              color: COLOR_ALL[3]
            };
            break;
          case "公共卫生":
            this.allData[i].itemStyle = {
              color: COLOR_ALL[4]
            };
            break;
          case "通信":
            this.allData[i].itemStyle = {
              color: COLOR_ALL[5]
            };
            break;

          default:
            break;
        }
      }
      //流量关系图
      const lineOption = {
        title: {
          text: "",
          subtext: "数据来自网络安全扫描服务器",
          left: "center",
          align: "right"
        },
        grid: {
          bottom: 80
        },
        dataZoom: [
          {
            show: false,
            realtime: true,
            start: 95,
            end: 100
          },
          {
            type: "inside",
            realtime: true,
            start: 95,
            end: 100
          }
        ],
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            data: [].map(function(str) {
              return str.replace(" ", "\n");
            })
          }
        ],
        yAxis: [
          {
            name: "扫描漏洞量",
            type: "value",
            max: 500
          },
          {
            name: "漏洞量",
            nameLocation: "start",
            max: 5,
            type: "value",
            inverse: true
          }
        ],
        series: [
          {
            name: "流量",
            type: "line",
            areaStyle: {},
            lineStyle: {
              width: 1
            },
            emphasis: {
              focus: "series"
            },
            markArea: {
              silent: true,
              itemStyle: {
                opacity: 0.3
              },
              data: [
                [
                  {
                    xAxis: "2009/9/12\n7:00"
                  },
                  {
                    xAxis: "2009/9/22\n7:00"
                  }
                ]
              ]
            },
            data: [0.97, 0.96, 0.96, 0.41]
          },
          {
            name: "漏洞量",
            type: "line",
            yAxisIndex: 1,
            areaStyle: {},
            lineStyle: {
              width: 1
            },
            emphasis: {
              focus: "series"
            },
            markArea: {
              silent: true,
              itemStyle: {
                opacity: 0.3
              },
              data: [
                [
                  {
                    xAxis: "2009/9/10\n7:00"
                  },
                  {
                    xAxis: "2009/9/20\n7:00"
                  }
                ]
              ]
            },
            data: [0.032, 0.019, 0]
          }
        ]
      };
      // 类型分布
      const optionB1 = {
        color: [
          "#042436",
          "#08527D",
          "#08527D",
          "#0F6DA4",
          "#49B0EB",
          "#7DC5EE",
          "#A4D6F2"
        ],
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: ["20%", "40%"],
            center: ["50%", "50%"],

            label: {
              formatter: "{per|{d}%} \n {b|{b}}",

              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  padding: [3, 0, 0, 0]
                },
                per: {
                  color: "#A4D6F2",
                  padding: [13, 0, 0, 0]
                }
              }
            },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.3)"
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            data: b1Data
          }
        ]
      };
      // 操作系统
      const optionB2 = {
        xAxis: {
          max: 400,
          show: true,
          splitLine: { show: false }
        },
        yAxis: {
          type: "category",
          data: b2Datas.keys,
          show: false,
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: "dataMax" // only the largest 3 bars will be displayed
        },
        grid: {
          bottom: 150,
          top: 10,
          right: 20,
          left: 5,
          height: 120
        },
        series: [
          {
            name: "X",
            type: "bar",
            data: b2Datas.datas,
            itemStyle: {
              color: function() {
                return COLOR_ALL[Math.ceil(Math.random() * 6)] || "#5470c6";
              }
            },
            label: {
              show: true,
              position: "right",
              valueAnimation: true,
              formatter: "{b|{b}}",
              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  padding: [3, 0, 0, 0]
                },
                per: {
                  color: "#A4D6F2",
                  padding: [13, 0, 0, 0]
                }
              }
            }
          }
        ],
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear"
      };
      //   协议分布
      const optionB3 = {
        xAxis: {
          max: 400,
          show: true,
          splitLine: { show: false }
        },
        yAxis: {
          type: "category",
          data: b3Datas.keys,
          show: false,
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: "dataMax" // only the largest 3 bars will be displayed
        },
        grid: {
          bottom: 150,
          top: 10,
          right: 20,
          left: 5,
          height: 120
        },
        series: [
          {
            realtimeSort: true,
            name: "X",
            type: "bar",
            data: b3Datas.datas,
            itemStyle: {
              color: function() {
                return COLOR_ALL[Math.ceil(Math.random() * 6)] || "#5470c6";
              }
            },
            label: {
              show: true,
              position: "right",
              valueAnimation: true,
              formatter: "{b|{b}}",
              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  padding: [3, 0, 0, 0]
                },
                per: {
                  color: "#A4D6F2",
                  padding: [13, 0, 0, 0]
                }
              }
            }
          }
        ],

        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear"
      };
      //   端口分布
      const optionB4 = {
        xAxis: {
          max: 400,
          show: true,
          splitLine: { show: false }
        },
        yAxis: {
          type: "category",
          data: ["80", "88", "42"],
          show: false,
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: "dataMax" // only the largest 3 bars will be displayed
        },
        grid: {
          bottom: 150,
          top: 10,
          right: 20,
          left: 5,
          height: 120
        },
        series: [
          {
            realtimeSort: true,
            name: "X",
            type: "bar",
            data: b2Datas.datas,
            itemStyle: {
              color: function() {
                return COLOR_ALL[Math.ceil(Math.random() * 6)] || "#5470c6";
              }
            },
            label: {
              show: true,
              position: "right",
              //   valueAnimation: true,
              formatter: "{b|{b}}",
              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  padding: [3, 0, 0, 0]
                },
                per: {
                  color: "#A4D6F2",
                  padding: [13, 0, 0, 0]
                }
              }
            }
          }
        ],

        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear"
      };
      //   规则分布
      const optionB5 = {
        xAxis: {
          max: 400,
          show: true,
          splitLine: { show: false }
        },
        yAxis: {
          type: "category",
          data: ["Nginx", "Tengine", "JAVA", "JSP"],
          show: false,
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: "dataMax" // only the largest 3 bars will be displayed
        },
        grid: {
          bottom: 150,
          top: 10,
          right: 20,
          left: 5,
          height: 120
        },
        series: [
          {
            realtimeSort: true,
            name: "X",
            type: "bar",
            data: b2Datas.datas,
            itemStyle: {
              color: function() {
                return COLOR_ALL[Math.ceil(Math.random() * 6)] || "#5470c6";
              }
            },
            label: {
              show: true,
              position: "right",
              //   valueAnimation: true,
              formatter: "{b|{b}}",
              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  padding: [3, 0, 0, 0]
                },
                per: {
                  color: "#A4D6F2",
                  padding: [13, 0, 0, 0]
                }
              }
            }
          }
        ],

        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear"
      };
      // 产业分布
      const optionB6 = {
        xAxis: {
          max: 400,
          show: true,
          splitLine: { show: false }
        },
        yAxis: {
          type: "category",
          data: b6Datas.keys,
          show: false,
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: "dataMax" // only the largest 3 bars will be displayed
        },
        grid: {
          bottom: 150,
          top: 10,
          right: 20,
          left: 5,
          height: 120
        },
        series: [
          {
            realtimeSort: true,
            name: "X",
            type: "bar",
            data: b6Datas.datas,
            itemStyle: {
              color: function() {
                return COLOR_ALL[Math.ceil(Math.random() * 6)] || "#5470c6";
              }
            },
            label: {
              show: true,
              position: "right",
              //   valueAnimation: true,
              formatter: "{b|{b}}",
              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  padding: [3, 0, 0, 0]
                },
                per: {
                  color: "#A4D6F2",
                  padding: [13, 0, 0, 0]
                }
              }
            }
          }
        ],

        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear"
      };

      this.mychartLine1 = echarts.init(line1);
      this.mychartB1 = echarts.init(b1);
      this.mychartB2 = echarts.init(b2);
      this.mychartB3 = echarts.init(b3);
      this.mychartB4 = echarts.init(b4);
      this.mychartB5 = echarts.init(b5);
      this.mychartB6 = echarts.init(b6);
      this.mychartLine1.setOption(lineOption);
      this.mychartB1.setOption(optionB1);
      this.mychartB2.setOption(optionB2);
      this.mychartB3.setOption(optionB3);
      this.mychartB4.setOption(optionB4);
      this.mychartB5.setOption(optionB5);
      this.mychartB6.setOption(optionB6);
      const d1 = this.$refs.d1;
      const d2 = this.$refs.d2;
      this.mychartD1 = echarts.init(d1);
      this.mychartD2 = echarts.init(d2);
    },
    handleChange(tag) {
      var selQS = this.$refs.radio1;
      selQS.checked = true;
      const nextSelectedTags = this.selectedTags != tag ? tag : "all";
      this.selectedTags = nextSelectedTags;
      var arr = this.getDataForType(this.selectedTags); // eslint-disable-line no-unused-vars
      this.setDatas(arr, nextSelectedTags);
    },
    setDatas(forData, tag) {
      this.dwTotle = "";
      this.zcTotle = "";
      var num = Math.ceil(Math.random() * (9876 - 10) + 10);
      setTimeout(() => {
        this.dwTotle = forData.length.toString();
        this.zcTotle = num.toString();
      }, 300);
      const b1 = this.$refs.b1;
      const b2 = this.$refs.b2;
      const b3 = this.$refs.b3;
      const b4 = this.$refs.b4;
      const b5 = this.$refs.b5;
      const b6 = this.$refs.b6;
      const data =
        tag == "all"
          ? this.getTypes(forData)
          : this.getTypesForType(forData, tag);
      const b1Data = data.b1Data;
      const b2Datas = data.b2Data;
      const b3Datas = data.b3Data;
      const b6Datas = data.b6Data;
      // 类型分布
      const optionB1 = {
        series: [
          {
            data: b1Data
          }
        ]
      };
      // 操作系统
      const optionB2 = {
        yAxis: {
          data: b2Datas.keys
        },
        series: [
          {
            data: b2Datas.datas
          }
        ],

        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear"
      };
      //   协议分布
      const optionB3 = {
        yAxis: {
          data: b3Datas.keys
        },
        series: [
          {
            data: b3Datas.datas
          }
        ]
      };
      //   端口分布
      const optionB4 = {
        yAxis: {
          data: ["80", "88", "42"]
        },
        series: [
          {
            data: b2Datas.datas
          }
        ]
      };
      //   规则分布
      const optionB5 = {
        yAxis: {
          data: ["Nginx", "Tengine", "JAVA", "JSP"]
        },
        series: [
          {
            data: b2Datas.datas
          }
        ]
      };
      // 产业分布
      const optionB6 = {
        yAxis: {
          data: b6Datas.keys
        },
        series: [
          {
            data: b6Datas.datas
          }
        ]
      };

      this.mychartB1 = echarts.init(b1);
      this.mychartB2 = echarts.init(b2);
      this.mychartB3 = echarts.init(b3);
      this.mychartB4 = echarts.init(b4);
      this.mychartB5 = echarts.init(b5);
      this.mychartB6 = echarts.init(b6);
      this.mychartB1.setOption(optionB1);
      this.mychartB2.setOption(optionB2);
      this.mychartB3.setOption(optionB3);
      this.mychartB4.setOption(optionB4);
      this.mychartB5.setOption(optionB5);
      this.mychartB6.setOption(optionB6);
    },
    /**
     * setline
     */
    setLineDatas(data, type) {
      //流量关系图
      const lineOption = {
        xAxis: [
          {
            data: data.line1.xAxisData.map(function(str) {
              return str.replace(" ", "\n");
            })
          }
        ],
        series: [
          {
            data: data.line1.series01
          },
          {
            data: data.line1.series02
          }
        ]
      };
      if (type == "line1") {
        this.mychartLine1.setOption(lineOption);
      }
    },
    /**
     * 构建中间对话框
     */
    dewDilge(data) {
      this.shwTip = true;
      // d1 饼图
      const optionD1 = {
        color: [
          "#042436",
          "#08527D",
          "#0F6DA4",
          "#49B0EB",
          "#7DC5EE",
          "#A4D6F2"
        ],
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: ["20%", "40%"],
            center: ["50%", "50%"],

            label: {
              formatter: "{per|{d}%} \n {b|{b}}",

              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  padding: [3, 0, 0, 0]
                },
                per: {
                  color: "#A4D6F2",
                  padding: [13, 0, 0, 0]
                }
              }
            },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.3)"
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            data: data
          }
        ]
      };
      const optionD2 = {
        color: [
          "#042436",
          "#08527D",
          "#0F6DA4",
          "#49B0EB",
          "#7DC5EE",
          "#A4D6F2"
        ],
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: ["20%", "40%"],
            center: ["50%", "50%"],

            label: {
              formatter: "{per|{d}%} \n {b|{b}}",

              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  padding: [3, 0, 0, 0]
                },
                per: {
                  color: "#A4D6F2",
                  padding: [13, 0, 0, 0]
                }
              }
            },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.3)"
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            data: data
          }
        ]
      };

      this.mychartD1.setOption(optionD1);
      this.mychartD2.setOption(optionD2);
    },
    // 返回重点单位
    getData(v) {
      var arr = [];
      if (v == 2) {
        for (var i = 0; i < this.allData.length; i++) {
          if (this.allData[i].isKey > 0) {
            arr.push(this.allData[i]);
          }
        }
      } else {
        arr = this.allData;
      }
      return arr;
    },
    // 返回重点单位
    getDataForType(v) {
      var arr = []; // eslint-disable-line no-unused-vars
      if (v != "all") {
        for (var i = 0; i < this.allData.length; i++) {
          if (this.allData[i].type == v) {
            arr.push(this.allData[i]);
          }
        }
      } else {
        arr = this.allData;
      }
      return arr;
    },
    // 整体数据过滤
    getTypes(data) {
      var typeNameArr = {
        b1Data: [
          {
            value: 0,
            name: "教育"
          },
          {
            value: 0,
            name: "工业"
          },
          {
            value: 0,
            name: "政府"
          },
          {
            value: 0,
            name: "金融"
          },
          {
            value: 0,
            name: "公共卫生"
          },
          {
            value: 0,
            name: "通信"
          }
        ],
        b2Data: {
          keys: ["windows", "centOs", "ubuntu"],
          datas: [0, 0, 0]
        },
        b3Data: {
          keys: ["http", "https", "pop3"],
          datas: [0, 0, 0]
        },
        b6Data: {
          keys: [
            "安全产品",
            "物联网设备",
            "企业应用",
            "网络产品",
            "支撑系统",
            "系统软件",
            "办公外设"
          ],
          datas: [0, 0, 0, 0, 0, 0, 0]
        }
      };
      for (let i = 0; i < data.length; i++) {
        const teg = data[i];
        for (let j = 0; j < typeNameArr.b1Data.length; j++) {
          if (teg.type == typeNameArr.b1Data[j].name) {
            typeNameArr.b1Data[j].value += 1;
          }
        }
        for (let k = 0; k < typeNameArr.b2Data.keys.length; k++) {
          const key = typeNameArr.b2Data.keys[k];
          const key3 = typeNameArr.b3Data.keys[k];
          if (teg.system == key) {
            typeNameArr.b2Data.datas[k] += 1;
          }
          if (teg.protocols == key3) {
            typeNameArr.b3Data.datas[k] += 1;
          }
        }
        for (let z = 0; z < typeNameArr.b6Data.keys.length; z++) {
          const key6 = typeNameArr.b6Data.keys[z];
          if (teg.addressType == key6) {
            typeNameArr.b6Data.datas[z] += 1;
          }
        }
      }
      return typeNameArr;
    },
    // 通过行业数据过滤
    getTypesForType(data, type) {
      var typeNameArr = {
        b1Data: [
          {
            value: 0,
            name: type
          }
        ],
        b2Data: {
          keys: ["windows", "centOs", "ubuntu"],
          datas: [0, 0, 0]
        },
        b3Data: {
          keys: ["http", "https", "pop3"],
          datas: [0, 0, 0]
        },
        b6Data: {
          keys: [
            "安全产品",
            "物联网设备",
            "企业应用",
            "网络产品",
            "支撑系统",
            "系统软件",
            "办公外设"
          ],
          datas: [0, 0, 0, 0, 0, 0, 0]
        }
      };
      for (let i = 0; i < data.length; i++) {
        const teg = data[i];
        for (let j = 0; j < typeNameArr.b1Data.length; j++) {
          if (teg.type == typeNameArr.b1Data[j].name) {
            typeNameArr.b1Data[j].value += 1;
          }
        }
        for (let k = 0; k < typeNameArr.b2Data.keys.length; k++) {
          const key = typeNameArr.b2Data.keys[k];
          const key3 = typeNameArr.b3Data.keys[k];
          if (teg.system == key) {
            typeNameArr.b2Data.datas[k] += 1;
          }
          if (teg.protocols == key3) {
            typeNameArr.b3Data.datas[k] += 1;
          }
        }
        for (let z = 0; z < typeNameArr.b6Data.keys.length; z++) {
          const key6 = typeNameArr.b6Data.keys[z];
          if (teg.addressType == key6) {
            typeNameArr.b6Data.datas[z] += 1;
          }
        }
      }
      return typeNameArr;
    },
    /**返回语音音**/
    getAdeio(v) {
      myHttp
        .mypost("/gatAudio", v)
        .then(res => {
          var audio = document.getElementById("myAudio");
          audio.controls = true;
          audio.src = this.serverIP + res.videoUrl;
          // console.log(audio.url, "==================res.videoUrl");
          //简单利用URL生成播放地址，注意不用了时需要revokeObjectURL，否则霸占内存
          audio.play();
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
